<!--
 * @Author: Li Zengkun
 * @Date: 2022-08-10 08:58:30
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-08-15 18:33:01
 * @Description: 分类
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/classify.css">
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
    <title>分类</title>
</head>

<body>
    <!-- HEADER -->
    <header>
        <div class="input-box">
            <input id="searchBar" class="search" type="text" placeholder="搜索商品，共10000+款好物">
            <img id="magnifier" class="icon" src="../img/classify/放大镜.png" alt="">
        </div>
    </header>

    <!-- CONTENT BOX -->
    <div class="content-box">
        <!-- Commodity classification nav -->
        <div class="classify-nav">
            <ul class="classify-list" id="classify-list">
            </ul>
        </div>
        <!-- Commodity content -->
        <div class="right-content">
            <!-- 女士分类 -->
            <div id="classify-child" class="classify-content">
                <div class="banner">
                    <img id="classify-img" src="" alt="">
                </div>
                <div id="classify-child-name" class="headline">女士分类</div>
                <ul id="classify-content-list" class="classify-content-list">
                </ul>
            </div>
        </div>

    </div>
    <!-- 底部导航 -->
    <nav class="bottom-nav">
        <a href="./index.html">
            <img src="../img/footer/首页1.png" alt="">
            <span>首页</span>
        </a>
        <a href="./selection.html">
            <img src="../img/footer/钻石 (1).png" alt="">
            <span>优选</span>
        </a>
        <a class="active" href="./classify.html">
            <img src="../img/footer/分类1.png" alt="">
            <span>分类</span>
        </a>
        <a href="./cart.html">
            <img src="../img/footer/购物车2.png" alt="">
            <span>购物车</span>
        </a>
        <a href="./personal_center.html">
            <img src="../img/footer/我的2.png" alt="">
            <span>我的</span>
        </a>
    </nav>
</body>

<script>
    let oClassifyList = document.querySelector('#classify-list')
    let oClassifyImg = document.querySelector('#classify-img')
    let oClassifyChildName = document.querySelector('#classify-child-name')
    let oClassifyChildList = document.querySelector('#classify-content-list')
    let user = JSON.parse(localStorage.getItem('user'))
    let classifyParent = null
    let showClassify = null
    let showClassiftChild = null

    init()

    function init() {
        // 已经登陆
        if (user) {
            let ajax = new XMLHttpRequest()
            ajax.open('GET', 'http://localhost:3002/category/sub?pId=' + 1, true)
            ajax.setRequestHeader('Authorization', `Bearer ${user.token}`)
            ajax.send()
            ajax.onreadystatechange = () => {
                if (ajax.readyState === 4) {
                    let resp = JSON.parse(ajax.responseText)
                    classifyParent = resp.data
                    initSidebar()
                    getChildClassify()
                }
            }
        }
    }

    // 初始化侧边栏
    function initSidebar() {
        classifyParent.forEach((item) => {
            // onclick="getChildClassify(${item.id})"
            let itemHTML = `<li data-id="${item.id}">${item.name}</li>`
            oClassifyList.insertAdjacentHTML('beforeend', itemHTML)
        })
        oClassifyList.firstElementChild.classList.add('active')
            // getChildClassify(classifyParent[0].id)
        bindNacClickEvent()
    }
    // 绑定侧边菜单栏点击事件
    function bindNacClickEvent() {
        Array.from(oClassifyList.children).forEach((item) => {
            item.addEventListener('click', window.getChildClassify)
        })
    }
    // 获取子集分类
    function getChildClassify() {
        let pid = 0
            // 初始化
        if (this.document == document) {
            pid = classifyParent[0].id
        } else {
            pid = parseInt(event.target.getAttribute('data-id'))
            document.querySelector('.active').classList.remove('active')
            this.classList.add('active')
        }
        showClassify = classifyParent.find((item) => {
            return item.id === pid
        })
        oClassifyImg.src = showClassify.img
        oClassifyChildName.innerText = `${showClassify.name}分类`
        let ajax = new XMLHttpRequest()
        ajax.open('GET', `http://localhost:3002/category/sub?pId=${pid}`, true)
        ajax.setRequestHeader('Authorization', `Bearer ${user.token}`)
        ajax.send()
        ajax.onreadystatechange = () => {
            if (ajax.readyState === 4) {
                let resp = JSON.parse(ajax.responseText)
                showClassiftChild = resp.data
                initClassifyChild()
            }
        }
    }

    // 初始化子分类
    function initClassifyChild() {
        while (oClassifyChildList.hasChildNodes()) {
            oClassifyChildList.removeChild(oClassifyChildList.firstChild)
        }
        showClassiftChild.forEach((item) => {
            let itemHTML = ` <li>
                        <a href="./search_result.html?keyword=${item.name}">
                            <p><img src="${item.img}" alt=""></p>
                            <p>${item.name}</p>
                        </a>
                    </li>`
            oClassifyChildList.insertAdjacentHTML('beforeend', itemHTML)
        })
    }
</script>
<!-- 搜索 -->
<script>
    let oSearchBar = document.querySelector('#searchBar')
    let oMagnifier = document.querySelector('#magnifier')

    // 事件绑定
    oMagnifier.addEventListener('click', skipSearchResult)
    oSearchBar.addEventListener('keydown', EnterKey)

    // 回车搜索
    function EnterKey(event) {
        event = event || window.event;
        if (event.keyCode == 13) {
            skipSearchResult()
        }
    }
    // 搜索跳转
    function skipSearchResult() {
        let keyword = oSearchBar.value.trim()
        if (!keyword) {
            return
        }
        window.location.href = `./search_result.html?keyword=${keyword}`
    }
</script>

</html>